<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .color {
        color: red;
      }
    </style>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <!-- 模板内容 -->
    <!-- 
        在vue中有三种组件
        1.全局组件
            如何使用全局组件
            1.1 调用vue.extend()方法创建一个组件的构造器，该构造器有一个属性template（定义组件要渲染的html）
            1.2 使用 Vue.component()方法注册组件，需要提供两个参数：组件标签的名称和组件的构造器，内部会调用组件构造器并创建一个组件的实例
            1.3 要将组件挂载到某个vue的实例下面

            注意：一个组件的data选项一定是一个函数，该函数会返回一个对象
        2.局部组件
            可以使用选项对象的components属性实现局部的注册
            现在我们的组件构造器还是全局的，它不是真正意义上的局部组件。
        3.组件模板（常用的方式）
    -->
    <div id="demo">
      <my-aaa></my-aaa>
    </div>

    <template id="aaa">
      <div>
        <h1>这是哈啊哈哈哈组件</h1>
        <ul>
          <li v-for="item in list">{{item}}</li>
        </ul>
      </div>
    </template>
    <script>
      // 局部组件
      var demo = new Vue({
        el: "#demo",

        components: {
          "my-aaa": {
            data() {
              return {
                list: ["apple", "banana", "orange"],
                msg: "这是一个哈哈哈哈哈"
              };
            },
            methods: {
                change(){
                    this.msg="change"
                }
            },
            template: "#aaa"
          }
        }
      });
    </script>
  </body>
</html>
